<template>
    <el-dialog v-loading="loading" :visible="visible" title="应用到检验标准" width="800px" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @close="onClose" @open="onOpen">
        <div>
            <el-form :model="searchForm" size="small" label-position="left" label-suffix=":" ref="searchForm" label-width="80px">
                <el-form-item label="应用范围" prop="applyStatus">
                    <el-radio-group v-model="applyStatus" @change="radioChange">
                        <el-radio label="部分">部分</el-radio>
                        <el-radio label="全部">全部</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="container-table" v-if="applyStatus==='部分'">
                <el-table max-height="350" border stripe v-loading="loading" :data="planList" @select="selectOne" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" fixed="left" />
                    <el-table-column :label="$t('public.serialNum')" type="index" width="50" align="center">
                        <template slot-scope="scope">
                            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column sortable :label="$t('inventoryManagement.materialName')" align="left" min-width="200" prop="materialName" :show-overflow-tooltip="true" />
                    <el-table-column sortable :label="$t('inventoryManagement.materialNo')" align="left" width="120" :show-overflow-tooltip="true" prop="materialCode" />
                    <el-table-column sortable :label="$t('inventoryManagement.materialType')" align="left" width="100" :show-overflow-tooltip="true" prop="materialType" />
                    <el-table-column sortable :label="$t('inspectionManagement.factory')" width="140" align="left" prop="factoryName" :show-overflow-tooltip="true" />
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
            </div>
        </div>
        <div slot="footer">
            <el-button type="primary" @click="submitForm" icon="el-icon-check" size="small">提交</el-button>
            <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {getItemsByTemplateName, inspectionPlan,} from '@/api/inspectionManagement/inspectionManagement'

export default {
    name: 'TemplateDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            applyStatus: '部分',
            total: 1,
            planList: [{ templateName: 'xx模板' }],
            searchForm: {
                templateName: null,
            },
            checkDatas: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                templateName: null,
            },
            loading: false,
            data: null,
            title: '',
            nodeType: this.$store.state.fmea.nodeType,
        }
    },
    methods: {
        submitForm() {
            let ids = []
            this.checkDatas.forEach((io) => {
                ids.push(io.id)
            })
            if (this.applyStatus === '全部') {
                this.$emit('callback', '全部')
            } else {
                this.$emit('callback', ids.join(','))
            }
            this.$emit('update:visible', false)
        },
        selectOne(e, row) {
            if (e.length === 0) {
                const index = this.checkDatas.findIndex((io) => {
                    io.id === row.id
                })
                this.checkDatas.splice(index, 1)
            } else {
                let checkDatas = [...this.checkDatas]
                checkDatas.push(row)
                this.checkDatas = checkDatas
            }
            console.log(e, '1')
            console.log(row, '2')
        },
        handleSelectionChange(selection) {
            if (this.flag) {
                return
            }
            this.ids = selection.map((item) => item.measuringCode)
            this.names = selection.map((item) => item.deviceName)
            if (selection.length === 0) {
                this.planList.forEach((io) => {
                    for (let i = 0; i < this.checkDatas.length; i++) {
                        if (
                            io.measuringCode ===
                            this.checkDatas[i].measuringCode
                        ) {
                            this.checkDatas.splice(i, 1)
                            i--
                        }
                    }
                })
            } else {
                if (this.planList.length === selection.length) {
                    let checkDatas = [...this.checkDatas]
                    selection.forEach((ko) => {
                        const temp = checkDatas.find((io) => {
                            return io.measuringCode === ko.measuringCode
                        })
                        if (!temp) {
                            checkDatas.push(ko)
                        }
                    })
                    this.checkDatas = checkDatas
                }
            }
            this.single = selection.length != 1
            // this.multiple = !selection.length
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                templateName: null,
            }
            this.getList()
        },
        getList() {
            this.flag = true
            inspectionPlan({ ...this.queryParams, ...this.params }).then(
                (response) => {
                    if (response.code == 200 && response.rows) {
                        this.planList = response.rows
                        this.$nextTick(function () {
                            this.planList.forEach((io) => {
                                this.checkDatas.forEach((ko) => {
                                    if (io.id === ko.id) {
                                        this.$refs.multipleTable.toggleRowSelection(
                                            io,
                                            this.flag
                                        )
                                    }
                                })
                            })
                            this.flag = false
                        })
                    }
                }
            )
        },
        // 窗口打开
        onOpen() {
            this.getList()
        },
        // 窗口关闭
        onClose() {
            this.data = null
        },
        handleConfirm() {
            this.$emit('update:visible', false)
        },
        choose(scope) {
            console.log(scope.row.templateName)
            getItemsByTemplateName({
                templateName: scope.row.templateName,
            }).then((response) => {
                console.log(response)
                this.$emit('callback', response.data)
                this.$emit('update:visible', false)
            })
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible', false)
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
